<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>发布文章</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 表单 -->
      <el-form ref="form" :model="article" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="article.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <!-- 富文本编辑器 -->
          <quill-editor :options="editorOption" v-model="article.content"></quill-editor>
        </el-form-item>
        <el-form-item label="封面">
          <el-radio-group v-model="article.cover.type">
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 选择封面盒子 -->
        <div v-if="article.cover.type > 0">
          <cover ref="cover" :picnum="article.cover.type" :key="article.cover.type"></cover>
        </div>
        <el-form-item label="频道" prop="channel_id">
          <el-select v-model="article.channel_id" placeholder="请选择频道">
            <el-option :label="item.name" :value="item.id" v-for="item in channels" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="totalValidator(false)">发表</el-button>
          <el-button @click="totalValidator(true)">存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 引入富文本编辑器
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// 引入封面组件
import Cover from '@/views/AddArticle/Cover'
// 引入获取文章频道接口
import {getChannel,pubArticle} from '@/api/article'

export default {
  components: {quillEditor,Cover},
  data() {
    //   文章标题验证
    const lengthValidator = (rule,value,callback)=>{
        if(value.length >= 5 && value.length <= 30){
            callback();
        }else {
            callback(new Error('标题的长度在5到30之间'));
        }
    }
    return {
      article: {
        title: "",
        content: "",
        channel_id: "",
        cover: {
          type: 0,
          images: [],
        },
      },
       //频道信息
      channels:[],
      editorOption:{
           placeholder: '',//占位文字
            modules: {
              toolbar: [
                ["bold", "italic", "underline", "strike"],
                ["blockquote", "code-block"],
                [{ header: 1 }, { header: 2 }],
                [{ list: "ordered" }, { list: "bullet" }],
                [{ indent: "-1" }, { indent: "+1" }],
                ["image"]
              ]
            }
        },
        rules:{
            title:[
                {required:true,message:'文章标题不能为空',trigger:'blur'},
                {validator:lengthValidator,trigger:'blur'},
            ],
            content:[
                {required:true,message:'文章内容不能为空',trigger:'blur'},
                {min:20,max:30000,message:'内容最少20个字',trigger:'blur'}
            ],
            channel_id:[
                {required:true,message:'文章频道不能为空',trigger:'blur'}
            ]
        }
    }
  },
  methods: {
    //   获取文章频道
    hgetChannels(){
        getChannel()
        .then((res)=>{
            // console.log(res);  //res.data.data.channels
            this.channels = res.data.data.channels;
        })
        .catch((err)=>{
            console.log('获取文章频道失败');
        });
    },
    // 表单提交
    totalValidator(draft){
      // 整体验证
      this.$refs['form'].validate((valid) => {
          if (valid) {
            // 验证通过
            if(this.article.cover.type > 0){
                let images = this.$refs.cover.transformImage();
                this.article.cover.images = images;
            }
            // 发送请求
            pubArticle(draft,this.article)
            .then((res)=>{
              console.log(res);
              this.$message({
                type:'success',
                message:'文章发布成功'
              });
            })
            .catch((err)=>{
              console.log('添加文章失败');
            });
          } else {
            return false;
          }
        });
    }
  },
  mounted(){
      this.hgetChannels();
  }
};
</script>


<style lang="less" scoped>
/deep/.ql-container {
    height: 300px;
}
</style>